<script lang='ts' setup>
import { computed } from "vue";
import EditContainer from '../container/fat-form-create-drag-container-editor.vue'
import ViewContainer from '../container/fat-form-ceate-container-view.vue'
import { IFormItem } from '../type'
import { Plus, Delete } from "@element-plus/icons-vue";

interface IEmit {
  (event: 'update:modelValue', data: any): void
}
const props = defineProps<{
  item: IFormItem;
  modelValue: any;
  mode?: "edit" | "view"
}>()
const emit = defineEmits<IEmit>()
const modelValue = computed({
  get() {
    return props.modelValue
  }, set(val) {
    emit('update:modelValue', val)
    setTimeout(() => {
      console.log(modelValue.value);
    }, 500)
  }
})

onMounted(() => {
  if (props.mode === 'view') {
    console.log('layout-params', props.modelValue);
    console.log('layout-container', props.item);
  }
  if (!modelValue.value) {
    modelValue.value = {}
  }
})
</script>

<template>
  <EditContainer v-if="mode === 'edit'" item-key="id" :list="item.children" />
  <div class="array-container" v-else style="width:100%">
    <ViewContainer :form-params="modelValue" item-key="id" :layout-list="item.children" :is-container="true" />
  </div>
</template>

<style lang='scss' scoped>
.array-container {
  width: 100%;
  display: flex;

  .temp-input {
    align-self: flex-end;
    width: 68px;
  }
}
</style>